<template>
  <div class="box">
    <div class="search">
      <span class="mui-icon mui-icon mui-icon-search"></span>
      <input  class="input" v-model="trademarkName" type="text" placeholder="输入你想搜索的商标名称"/>
    </div>
    <span class="title" @click="search">免费查询</span>
  </div>
</template>

<script>
  import API from '@/config/api'

  export default {
    name: "Search",
    data: function () {
      return {
        trademarkName: ''
      }
    },
    methods: {
      search() {
       if (!this.trademarkName){
         this.$msg('请输入查询内容');
         return;
       }

        $('.input').blur();
        this.$router.push({path: '/trademarklist', query: {trademarkName: this.trademarkName}});
      }
    }
  }
</script>

<style lang="less" scoped>
  .box {
    display: flex;
    .search {
      flex: 1;
      position: relative;
    }

    .search .mui-icon {
      position: absolute;
      left: 0.25rem;
      top: 0.25rem;
      font-size: 0.35rem;
      color: #BBB;
    }

    .search input {
      display: inline-block;
      margin: 0;
      padding: 0;
      padding-left: 0.8rem;
      border-radius: 0.5rem 0 0 0.5rem;
      height: 0.84rem;
      border: 1px solid #E1E1E1;
      border-right: none;
      font-size: 0.28rem;
    }

    .title {
      display: inline-block;
      width: 1.5rem;
      line-height: 0.84rem;
      height: 0.84rem;
      font-size: 0.28rem;
      text-align: center;
      background-color: #59C7F9;
      color: white;
      border-radius: 0 0.5rem 0.5rem 0;
      border: 1px solid #59C7F9;
    }
  }

  .mint-msgbox {
    z-index: 999;
    color: white;
    border-radius: 6px;
    background-color: transparent;
    .header {
      border-radius: 6px 6px 0 0;
      background-color: #3c92ff;
      text-align: center;
      padding-bottom: 0.2rem;
      .title {
        padding-top: 0.35rem;
        font-size: 0.34rem;
        font-weight: 500;
      }
      .cont {
        padding-top: 0.1rem;
        font-size: 0.22rem;
      }
    }
    .content {
      background-color: #fff;
      text-align: center;
      color: #666666;
      padding: 0 0.3rem 0.5rem;
      p {
        height: 1rem;
        line-height: 1rem;
        font-size: 12px;
      }
      .tip {
        display: flex;
        flex-direction: column;
        font-size: 0.22rem;
        .inp {
          display: flex;
          span {
            width: 1.5rem;
            height: 0.74rem;
            line-height: 0.74rem;
            padding-right: 0.1rem;
            white-space: nowrap;
          }
          input {
            font-size: 0.22rem;
            border: 1px solid #DCDCDC;
            border-radius: 6px;
            background-color: #f1f4fb;
            height: 0.74rem;
            margin-bottom: 0;
          }
          input::placeholder {
            font-size: 0.22rem;
          }
        }
        .error {
          font-size: 0.22rem;
          text-align: left;
          padding-left: 1.5rem;
          line-height: 0.5rem;
          height: 0.5rem;
          color: #FF5555;
        }
      }
      button {
        width: 100%;
        margin: 0;
        padding: 0;
        background-color: #3c92ff;
        color: white;
        height: 0.9rem;
        line-height: 0.9rem;
      }
    }
  }
</style>
